<template>
	<view>
		<uv-sticky bgColor="#fff">
			<view style="padding: 20rpx;">
				<uv-subsection :list="list" :current="current" custom-style="height: 100rpx;" fontSize="15"
					activeColor="#333" @change="subChange"></uv-subsection>
			</view>
		</uv-sticky>

		<view style="text-align: center;padding: 20rpx 0;color: #666;">
			<view v-if="!isPlaying">选择难度，点击开始按钮训练</view>
			<view v-else-if="isWaiting">等待目标出现...</view>
			<view v-else-if="showResult">本次反应时间: {{ lastReactionTime.toFixed(1) }}ms</view>
			<view v-else>点击目标!</view>
		</view>

		<view class="game-content" @click="handleGameAreaClick">
			<view v-if="showTarget" class="target"
				:style="{'left':targetX+'px','top':targetY+'px','width':targetSize+'px','height':targetSize+'px','background-color':targetColor}"
				@click.stop="handleTargetClick"></view>
		</view>

		<view style="display: flex;align-items: center;justify-content: center;padding: 20rpx 0;">
			<view v-if="!isPlaying" class="game-btn-start" @click="startGame">
				<uv-icon name="play-right-fill" color="#fff"></uv-icon>
				<view style="margin-left: 20rpx;">开始</view>
			</view>

			<view v-if="isPlaying" class="game-btn-end" @click="endGame">
				<uni-icons type="circle-filled" size="16" color="#fff"></uni-icons>
				<view style="margin-left: 20rpx;">结束</view>
			</view>
		</view>

		<view class="content">
			<view class="item-left">
				<view class="desc">
					<view>尝试次数:</view>
					<view class="value-text">{{ attempts }}</view>
				</view>
				<view class="desc">
					<view>最快反应时间:</view>
					<view class="value-text">{{ bestTime ? bestTime.toFixed(1) : '-' }}ms</view>
				</view>
			</view>

			<view class="item-left">
				<view class="desc">
					<view>平均反应时间:</view>
					<view class="value-text">{{ averageTime.toFixed(1) }}ms</view>
				</view>
				<view class="desc">
					<view>当前难度:</view>
					<view class="value-text">{{ difficultyText }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		watch
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app'

	const current = ref(0)
	const list = [{
		name: '简单'
	}, {
		name: '中等'
	}, {
		name: '困难'
	}]
	const isPlaying = ref(false) // 是否正在游戏中
	const isWaiting = ref(false) // 是否在等待目标出现
	const showTarget = ref(false) // 是否显示目标
	const showResult = ref(false) // 是否显示本次结果
	const targetX = ref(0) // 目标X坐标
	const targetY = ref(0) // 目标Y坐标
	const targetSize = ref(64) // 目标大小
	const targetColor = ref('#2b7fff') // 目标颜色
	const startTime = ref(0) // 目标出现的时间
	const attempts = ref(0) // 尝试次数
	const reactionTimes = ref([]) // 反应时间记录
	const averageTime = ref(0) // 平均反应时间
	const bestTime = ref(null) // 最佳反应时间
	const lastReactionTime = ref(0) // 上次反应时间
	const difficulty = ref(1) // 难度等级 (1-简单, 2-中等, 3-困难)
	const difficultyConfig = ref({
		1: {
			minWait: 1500, // 最小等待时间(ms)
			maxWait: 3000, // 最大等待时间(ms)
			targetSize: 64, // 目标大小(px)
			color: '#2b7fff' // 目标颜色
		},
		2: {
			minWait: 800,
			maxWait: 2000,
			targetSize: 48,
			color: '#f0b100'
		},
		3: {
			minWait: 300,
			maxWait: 1200,
			targetSize: 32,
			color: '#fb2c36'
		}
	})

	const difficultyText = computed(() => {
		// console.log('difficulty.value', difficulty.value)
		const texts = ['', '简单', '中等', '困难'];
		return texts[difficulty.value] || '中等';
	})

	function subChange(e) {
		if (isPlaying.value) {
			uni.showToast({
				title: '当前还没结束～',
				icon: "none"
			});
			return
		}

		current.value = e
		difficulty.value = e + 1
		setDifficulty(e + 1)
	}

	// 设置难度等级
	function setDifficulty(level) {
		if (level < 1 || level > 3) return;

		// 清除统计数据 - 新增代码开始
		attempts.value = 0;
		reactionTimes.value = [];
		averageTime.value = 0;
		bestTime.value = null;
		lastReactionTime.value = 0;

		difficulty.value = level;
		// 应用难度对应的目标大小和颜色
		targetSize.value = difficultyConfig.value[level].targetSize;
		targetColor.value = difficultyConfig.value[level].color;
	}
	// 开始游戏
	function startGame() {
		// 重置游戏状态
		isPlaying.value = true;
		attempts.value = 0;
		reactionTimes.value = [];
		averageTime.value = 0;
		bestTime.value = null;
		showResult.value = false;

		// 应用当前难度设置
		targetSize.value = difficultyConfig.value[difficulty.value].targetSize;
		targetColor.value = difficultyConfig.value[difficulty.value].color;

		// 开始第一轮
		startNextRound()
	}

	// 结束游戏
	function endGame() {
		isPlaying.value = false;
		isWaiting.value = false;
		showTarget.value = false;
		showResult.value = false;
	}
	// 开始下一轮
	function startNextRound() {
		showTarget.value = false;
		showResult.value = false;
		isWaiting.value = true;

		// 根据难度获取随机等待时间
		const {
			minWait,
			maxWait
		} = difficultyConfig.value[difficulty.value];
		const waitTime = Math.random() * (maxWait - minWait) + minWait;

		setTimeout(() => {
			// 如果游戏已经结束则不继续
			if (!isPlaying.value) return;

			isWaiting.value = false;
			showTarget.value = true;
			// 记录目标出现时间
			startTime.value = Date.now()
			// 随机位置
			setRandomPosition()
		}, waitTime)
	}

	// 设置目标随机位置
	function setRandomPosition() {
		// 游戏区域大小 (减去目标自身大小)
		const gameAreaWidth = 300; // 游戏区宽度
		const gameAreaHeight = 256; // 游戏区高度
		const maxX = gameAreaWidth - targetSize.value;
		const maxY = gameAreaHeight - targetSize.value;

		// 随机位置
		targetX.value = Math.floor(Math.random() * maxX);
		targetY.value = Math.floor(Math.random() * maxY);
	}
	// 处理目标点击
	function handleTargetClick() {
		// 只在游戏进行中且目标显示时响应
		if (!isPlaying.value || !showTarget.value || isWaiting.value) return;

		// 计算反应时间
		const reactionTime = Date.now() - startTime.value;
		lastReactionTime.value = reactionTime;

		// 更新统计数据
		attempts.value++;
		reactionTimes.value.push(reactionTime);

		// 更新平均时间
		averageTime.value = reactionTimes.value.reduce((sum, time) => sum + time, 0) / attempts.value;

		// 更新最佳时间
		if (!bestTime.value || reactionTime < bestTime.value) {
			bestTime.value = reactionTime;
		}

		// 隐藏目标，显示结果
		showTarget.value = false;
		showResult.value = true;

		// 短暂显示结果后进入下一轮
		setTimeout(() => {
			if (isPlaying.value) {
				startNextRound()
			}
		}, 1000); // 显示结果1秒
	}

	// 处理游戏区域点击（未击中目标）
	function handleGameAreaClick() {
		// 如果不在游戏中或正在等待，不处理
		if (!isPlaying.value || isWaiting.value) return;
	}
</script>

<style>
	@import "agile.css"
</style>